var formSelects = layui.formSelects;
formSelects.render('example9_1', {
    template: function (name, value, selected, disabled) {
        return name + '<span style="position: absolute; right: 0; color: #A0A0A0; font-size: 12px;">' + pinyin.getFullChars(name) + '</span>';
    }
});

formSelects.btns('example9_1', ['skin']);
//给值给予 运动项目下拉框
//server模式
formSelects.data('select13', 'server', {
    url: getRootPath() + 'atsBaseMap/findAtsPro',
    keyword: ''
});
seacher(formSelects, "select13");
var sportId = null;
formSelects.on('select13', function (id, vals, val, isAdd, isDisabled) {
    //id:           点击select的id
    //vals:         当前select已选中的值
    //val:          当前select点击的值
    //isAdd:        当前操作选中or取消
    //isDisabled:   当前选项是否是disabled
    //如果return false, 那么将取消本次操作
    if (val.val != null) {
        //server模式
        formSelects.data('example9_1', 'server', {
            url: getRootPath() + 'atsBaseMap/findBySportId?sportId=' + val.val
        });
        sportId = val.val;
    }
    $("#choceThing").html("");//清空choceThing
    //先清空
    $("#choiceItem").html('<input name="itemId" type="text" id="tree" placeholder="" lay-filter="tree" class="layui-input">');
    treeSele();
    seacher(formSelects, "example9_1");
});
formSelects.on('example9_1', function (id, vals, val, isAdd, isDisabled) {
    if (val.val != null) {
        if(isAdd == true){
            $("#choceThing").append('<div class="layui-form-item pici'+val.val+'"><label class="layui-form-label" style="width:87px">'+val.name.substring(0,val.name.lastIndexOf('('))+'批次</label><div id="demos'+val.val+'" class="xm-select-demo layui-input-block"></div></div>');
            var demoss1 = xmSelect.render({
                el: '#demos'+val.val,
                name: 'choiceOne',//表单提交时的name
                theme: {
                    color: '#9c26b0',
                },
                data:[]
            })
            //这里引入了一个第三方插件axios, 相当于$.ajax
            $.ajax({
                url: getRootPath()+"atsBaseMap/selectPici?val="+val.val+"",
                type: "post",
                data: {},
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (obj) {
                    demoss1.update({
                        data: obj,
                        autoRow: true,
                        filterable: true,
                    })
                },
                error: function () {

                }
            });
        }else if(isAdd == false){
            $(".pici"+val.val+"").html("");
        }
    }
},true);
/*指标树形下拉结构*/
var treeSelect = null;

function treeSele() {
    layui.use('treeSelect', function () {
        var setting = {
            view: {
                selectedMulti: true
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: null
                }
            }
        };
        treeSelect = layui.treeSelect;
        tree(treeSelect, setting, sportId);
    });
}

function tree(treeSelect, setting, sportId) {
    treeSelect.render({
        // 选择器
        elem: '#tree',
        // 数据
        data: getRootPath() + "atsBaseMap/selectXiaLa?sportId=" + sportId,
        // 异步加载方式：get/post，默认get
        type: 'post',
        // 占位符
        placeholder: '请不要选择父级指标',
        // 是否开启搜索功能：true/false，默认false
        search: true,
        setting: setting,
        // 点击回调
        click: function (d) {
            document.getElementById("tree").value = d.current.id;
        },
        check: function (d) {
            var value = "";
            for (var i = 0; i < d.current.length; i++) {
                value += d.current[i].id;
                if (i < d.current.length - 1) {
                    value += ","
                }
            }
            document.getElementById("tree").value = value;

        },
        // 加载完成后的回调函数
        success: function (d) {

        }
    });
}


/**
 * 出现搜索 formSelects
 * @param formSelects
 * @param id
 */
function seacher(formSelects, id) {
    formSelects.config(id, {
        type: 'get',                //请求方式: post, get, put, delete...
        header: {},                 //自定义请求头
        data: {},                   //自定义除搜索内容外的其他数据
        searchUrl: '',              //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
        searchName: 'keyword',      //自定义搜索内容的key值
        searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
        keyName: 'name',            //自定义返回数据中name的key, 默认 name
        keyVal: 'value',            //自定义返回数据中value的key, 默认 value
        keySel: 'selected',         //自定义返回数据中selected的key, 默认 selected
        keyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabled
        keyChildren: 'children',    //联动多选自定义children
        delay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
        direction: 'auto',          //多选下拉方向, auto|up|down
        response: {
            statusCode: 0,          //成功状态码
            statusName: 'code',     //code key
            msgName: 'msg',         //msg key
            dataName: 'data'        //data key
        },
        success: function (id, url, searchVal, result) {      //使用远程方式的success回调
            //console.log(id);        //组件ID xm-select
            //console.log(url);       //URL
            //console.log(searchVal); //搜索的value
            //console.log(result);    //返回的结果
        },
        error: function (id, url, searchVal, err) {           //使用远程方式的error回调
            //同上
            //console.log(err);   //err对象
        },
        beforeSuccess: function (id, url, searchVal, result) {        //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
            //console.log(id);        //组件ID xm-select
            //console.log(url);       //URL
            //console.log(searchVal); //搜索的value
            //console.log(result);    //返回的结果

            return result;  //必须return一个结果, 这个结果要符合对应的数据结构
        },
        beforeSearch: function (id, url, searchVal) {         //搜索前调用此方法, return true将触发搜索, 否则不触发
            if (!searchVal) {//如果搜索内容为空,就不触发搜索
                return false;
            }
            return true;
        },
        clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
    }, false);
}
